<template>
<!--  :class="{ 'site-content--tabs': $route.meta.isTab }" -->
  <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
    <div v-if="$route.path !== '/home'" :class='{"site-mian":!sidebarFold,"site-mians":sidebarFold}'>
      <div class="site-div"><div class="div-a">{{ `${bread[0]}`}}</div>   <span class="span-a">/</span>    <div class="div-b">{{`${bread[1]} ` }}</div></div>
      <!-- 客服电话 -->


      <div class="div-ed">

      <div class="div-ke">
      </div>
        <div v-if="isAuth('ent:msg:list')" class="notice">
          <el-popover width="320" popper-class="notice-popper">
            <div class="msg-container">
              <div class="top">
                <div style="font-weight: bold">消息通知</div>
              </div>
              <div class="medium">
                <div class="msg-item" v-for="item in noticeList">
                  <div class="title"><div class="content">{{item.content}}</div><div v-if="item.readFlag === 0"  style="width: 6px;height: 6px;background: #E96E6E;border-radius: 50%;display: inline-block;margin-right: 10px"></div></div>
                  <div class="other">
                    <div>{{`创建人:${item.createByName}`}}</div>
                    <div>{{item.createTime}}</div>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div @click="clickReadMore" class="more">查看更多</div>
              </div>
            </div>
            <div slot="reference" @click="getNoticeListReq"><el-icon class="el-icon-bell "></el-icon> </div>
          </el-popover>
          <div class="point">{{noticeList.length}}</div>
        </div>

      <el-menu class="menu-ee">
       <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="clickSysInfo">关于系统</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
      </div>
    </div>
    <!-- 主入口标签页 s -->
    <!-- <el-tabs
      v-if="$route.meta.isTab"
      v-model="mainTabsActiveName"
      :closable="true"
      @tab-click="selectedTabHandle"
      @tab-remove="removeTabHandle"> -->
      <!-- <el-dropdown class="site-tabs__tools" :show-timeout="0"> -->
        <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
        <!-- <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
        </el-dropdown-menu> -->
      <!-- </el-dropdown> -->
      <!-- <el-tab-pane
        v-for="item in mainTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name">

        <el-card shadow="never" :body-style="siteContentViewHeight">
          <iframe
            v-if="item.type === 'iframe'"
            :src="item.iframeUrl"
            width="100%" height="100%" frameborder="0" scrolling="yes">
          </iframe>
          <div v-else>
            <router-view v-if="item.name === mainTabsActiveName" />
          </div>
        </el-card>

      </el-tab-pane>
    </el-tabs> -->
    <!-- <sub-menu @menuWin="menuWin"></sub-menu> -->
    <!-- 主入口标签页 e -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
    <el-card shadow="never" :body-style="siteContentViewHeight">
      <keep-alive>
        <router-view />
      </keep-alive>
    </el-card>
    <el-dialog
      :visible.sync="sysInfoDialogVisible"
      width="30%">
      <span slot="title" style="font-size: 18px">关于系统</span>
      <div style="display: flex;align-items: center">
        <i class="el-icon-warning" style="display:inline-block;color: #E6A23C;font-size: 24px;margin-right: 5px"></i>
        <span style="display: inline-block">{{versionMsg}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="sysInfoDialogVisible = false">确 认</el-button>
  </span>
    </el-dialog>
  </main>
</template>

<script>
  // import SubMenu from './main-sidebar-sub-menu'
  import UpdatePassword from './main-navbar-update-password'
  import { mapState } from 'vuex'
 // import { clearLoginInfo } from '@/utils'
  import { isURL } from '@/utils/validate'
  import {getNoticeList} from '../api/notice/notice'
  import { isAuth } from '../utils'
  import {getSysInfoReq} from '../api/sys'
export default {
    data () {
      return {
        updatePassowrdVisible: false,
        noticeList: [],
        // deleMenu:{},
        // menuEdits:false
        bread: [],
        sysInfoDialogVisible: false,
        versionMsg: null
      }
    },
    computed: {
      ...mapState(['menuList']),
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      siteContentViewHeight () {
        var height = this.documentClientHeight - 7
        // var height = window.innerHeight

        if (this.$route.meta.isTab) {
          height -= 40
          return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      },
      getBread () {
        let cur = []
        this.menuList.forEach(val => {
          const c = val.list.find(v => v.menuId === this.$route.meta.menuId)
          if (c) {
            cur.push(val.name, c.name)
          }
        })
        this.bread = cur
      }
    },

    watch: {
      // menuList: {
      //   deep: true,
      //   handler(list) {
      //     let cur = []
      //     list.forEach(val => {
      //       const c = val.find(v => v.menuId === this.$route.meta.menuId)
      //       if (c) {
      //         cur.push(val.name, c.name)
      //       }
      //     })
      //     this.bread = cur
      //   }
      // }
      $route: {
        deep: true,
        handler: function ({meta}) {
          let cur = []
          this.menuList.forEach(val => {
            const c = val.list.find(v => v.menuId === meta.menuId)
            if (c) {
              cur.push(val.name, c.name)
            }
          })
          this.bread = cur
        }
      }
      // deleMenu: {
      //   handler(val) {
      //     window.setTimeout(() => {
      //       this.menuWin()
      //     }, 0)
      //   }
      // },
    },
    components: {
      // SubMenu
      UpdatePassword
    },
    created () {
      // this.menuWin()
      setTimeout(this.getBread, 0)
      if (this.isAuth('ent:msg:list')) { this.getNoticeListReq() }
      this.getVersionMsg()
    },
    methods: {
      isAuth (auth) {
        return isAuth(auth)
      },
      getVersionMsg () {
        getSysInfoReq({}, ({data}) => {
          this.versionMsg = data.version
        })
      },
      clickReadMore () {
        this.$router.push({name: 'workbox-notice'})
      },
      getNoticeListReq () {
        getNoticeList(
          {
            'typeId': 2,
            'size': 5
          },
          (data) => {
            this.noticeList = data.data
          }
        )
      },
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
      showSysInfoDialog () {
        this.sysInfoDialogVisible = true
      },
      clickSysInfo () {
        this.getVersionMsg()
        this.showSysInfoDialog()
      },
      logoutHandle () {
        this.$confirm('确定要退出系统吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showClose: false,
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              // clearLoginInfo()
              this.$router.push({ name: 'login' })
              sessionStorage.clear()
            }
          })
        }).catch(() => {})
      },
      // tabs, 选中tab
      selectedTabHandle (tab) {
        tab = this.mainTabs.filter(item => item.name === tab.name)
        if (tab.length >= 1) {
          this.$router.push({ name: tab[0].name })
        }
      },
      // menuWin(menu){
      // this.deleMenu = menu
      // console.log(this.deleMenu);
      // if(menu){
      //   this.menuEdits = true
      // }
      // },
      // tabs, 删除tab
      removeTabHandle (tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (this.mainTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            this.$router.push({ name: this.mainTabs[this.mainTabs.length - 1].name }, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
        } else {
          this.menuActiveName = ''
          this.$router.push({ name: 'home' })
        }
      },
      // tabs, 关闭当前
      tabsCloseCurrentHandle () {
        this.removeTabHandle(this.mainTabsActiveName)
      },
      // tabs, 关闭其它
      tabsCloseOtherHandle () {
        this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
      },
      // tabs, 关闭全部
      tabsCloseAllHandle () {
        this.mainTabs = []
        this.menuActiveName = ''
        this.$router.push({ name: 'home' })
      },
      // tabs, 刷新当前
      tabsRefreshCurrentHandle () {
        var tempTabName = this.mainTabsActiveName
        this.removeTabHandle(tempTabName)
        this.$nextTick(() => {
          this.$router.push({ name: tempTabName })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.el-menu{
.site-navbar__avatar{
    height: 46px !important;
    min-width:  80px !important;
    line-height: 46px !important;
    border: none !important;
    float: right;
}
}
.div-ed{
  height: 46px;
  position: fixed;
  right: 10px;
  .el-menu{
    .el-menu-item.is-active{
    background: #ffffff !important;
    border-radius: 6px !important;
    opacity: 1;
    }
  }
}
.div-ke{
  height: 46px;
  line-height: 46px;
  float: left;
  margin-right: 15px;
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 0.65 !important;
}
.menu-ee{
  float: right;
}
.site-div{
  // width: 80%;
  float: left;
}
// .site-menu{
//   width: 30%;
//   float: right;
// }
.site-mian{
  .el-menu{
    // float: right;
    border-right: none !important;
  }
}
.el-dropdown-link{
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.site-mian{
  height: 46px;
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 21, 41, 0.12);
  background-color: #ffffff;
  position: fixed;
    top: 0;
    right: 0;
    left: 200px;
    z-index: 1030;
    display: flex;
    align-items: center;
}
.site-mians{
  height: 46px;
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 21, 41, 0.12);
  background-color: #ffffff;
  position: fixed;
    top: 0;
    right: 0;
    left: 64px;
    z-index: 1030;
    display: flex;
    align-items: center;
}
.div-a{
  float: left;
  font-size: 14px !important;
  margin-left: 30px;
  opacity: 0.45;
}
.span-a{
  float: left;
  font-size: 14px !important;
  margin-left: 10px;
  margin-right: 10px;
  opacity: 0.45;

}
.div-b{
  float: left;
  font-size: 14px !important;
  font-weight: 600;
}
.notice{
  display: inline-block;
  height: 46px;
  width: 46px;
  line-height: 46px;
  font-size: 18px;
  margin-left: 5px;
  position:relative;
  text-align: center;
  .point{
    background-color: #F56B6C;
    color:#FFFFFF;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    position: absolute;
    line-height: 12px;
    text-align: center;
    font-size: 10px;
    top:8px;
    left: 22px;
    z-index: 1;
  }
}
.notice:hover{
  background-color: #F5F7FA;
  cursor: pointer;
}
.msg-container{
  .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    padding: 13px;
    background-color: #E8E8E8;
    color: #262626;
    font-weight: 500;
    span{
      font-size: 14px;
    }
  }
  .medium{
    width: 100%;
      .msg-item{
        width: 100%;
        height: 60px;
        border-bottom: 1px #E8E8E8 solid ;
        color: #D6D6D6;
        padding: 8px 13px;
        .title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          .content{
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }


          margin-bottom: 5px;
        }
        .title:hover{
          cursor: pointer;
        };
        .other{
          color: #8C8C8C;
          display: flex;
          justify-content: space-between;
        }
      }
      .msg-item:hover{
        background-color: #F5F7FA;
      }

    .active{
      color: #303133;
    }
    }
  .bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    .more{
      color: #262626;
      font-size: 13px;
      font-weight: bold;
      cursor: pointer;
    }
  }


}
</style>
<style lang="less">
.el-popover.notice-popper{
  padding: 0;
  border: 0 ;
}
</style>
